<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="cont">
        <div class="d-flex w-85 mx-auto h-60 align-items-center">
            <a href="" class="logo">
                <img src="./imgs/logo.png" alt="">
            </a>
            <h3 class="mx-5">学生信息收集系统</h3>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="add">添加信息</button>
        </div>
        <div class="w-85 mx-auto my-5">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>成绩</th>
                        <th width=200>操作</th>
                    </tr>
                </thead>
                <tbody>
                  <!-- ??? -->
                </tbody>
            </table>
        </div>
        <div class="w-85 mx-auto">
            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-sm justify-content-center">
                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                </ul>
            </nav>
        </div>
    </div>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">请输入学生信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="stuName" class="col-form-label">姓名：</label>
            <input type="text" class="form-control" id="stuName">
          </div>
          <div class="form-group">
            <label for="tel" class="col-form-label">手机号：</label>
            <input type="text" class="form-control" id="tel">
          </div>
          <div class="form-group">
            <label for="result" class="col-form-label">成绩：</label>
            <input type="text" class="form-control" id="result">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="submit" class="btn btn-primary mx-auto" data-dismiss="modal">提交</button>
      </div>
    </div>
  </div>
</div>


</body>
<script src="./libs/jquery.slim.js"></script>
<script src="./libs/popper.js"></script>
<script src="./libs/bootstrap.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/index.js"></script>
</html>